<template>
  <el-dialog
    append-to-body
    :title="info"
    :visible.sync="dialogVisible"
    align="left"
    v-loading="currLoading"
    :close-on-click-modal="false"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    width="600px"
    top="1%">
    <div v-if="dialogVisible">
      <div style="font-size: 13px; line-height: 60px; text-indent: 80px;">
        商品: 『<span class="red" v-text="currProduct.name"></span>』
      </div>
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="型号" align="left" prop="model">
          <el-input v-model="form.model" style="width: 200px" placeholder="请输入 型号" :maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="图片" align="left" prop="image">
          <el-upload
            class="avatar-uploader"
            :action="UploadFileUrl"
            :headers="getHeader()"
            name="myUploadFile"
            :show-file-list="false"
            :on-success="uploadIconSuccess">
            <img v-if="form.image" :src="form.image" class="avatar" style="width: 100px">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-input v-model="form.image" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="价格" align="left" prop="price">
          <el-input-number class="my-input" v-model="form.price" :min="0" :step="0.01" :max="99999999"
                           :controls="false"></el-input-number>
        </el-form-item>
        <el-form-item label="团购价格" align="left" prop="groupPrice">
          <el-input-number class="my-input" v-model="form.groupPrice" :min="0" :step="0.01" :max="99999999"
                           :controls="false" style="width: 200px"></el-input-number>
        </el-form-item>
        <el-form-item label="团购人数" align="left" prop="groupNums">
          <el-input-number class="my-input" v-model="form.groupNums" @change="checkNums" :min="0" :step="1" :max="100" :controls="false"
                           style="width: 200px"></el-input-number>
        </el-form-item>
        <el-form-item label="佣金(%)" align="left" prop="commission">
          <el-input-number class="my-input" v-model="form.commission" :min="0" :step="1" :max="50" :controls="false"
                           style="width: 200px"></el-input-number>
        </el-form-item>
        <el-form-item label="兑换所需积分" align="left" prop="score">
          <el-input-number class="my-input" v-model="form.score" @change="checkNums" :min="0" :step="1" :max="99999999" :controls="false"
                           style="width: 200px"></el-input-number>
        </el-form-item>
        <el-form-item
          v-if="currProduct.productSpecificationsData && currProduct.productSpecificationsData.length>0"
          v-for="(item,index) in currProduct.productSpecificationsData"
          :key="index"
          :label="item.name"
          align="left">
          <!--规格-自定义输入类型-->
          <el-input v-if="item.type.id===0"
                    v-model="form.specificationsData[item.name]"
                    maxlength="30"
                    style="width: 200px"></el-input>

          <!--规格-选项类型-->
          <el-select v-if="item.type.id===1" v-model="form.specificationsData[item.name]">
            <el-option
              v-for="(_item,_index) in item.itemList"
              :key="_index"
              :label="_item"
              :value="_item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否默认" align="left" prop="isDefault">
          <el-switch v-model="form.isDefault" active-color="#13ce66" inactive-color="#CCCCCC"></el-switch>
        </el-form-item>
        <el-form-item label="状态" align="left" prop="status">
          <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#CCCCCC"></el-switch>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ChooseStockBox from '../Common/ChooseStockBox'

export default {
  name: 'CreateStockDialog',
  components: {ChooseStockBox},
  props: {
    successFunction: Function
  },
  watch: {
    'form.score':function () {
      // this.$refs.form.validateField("price")
      if (this.form.score>0){
        this.form.groupNums=0
        this.form.groupPrice=0
      }
    },
    dialogVisible: function () {
      if (!this.dialogVisible) {
        this.form = {
          price: 0,
          nums: 0,
          image: '',
          model: '',
          groupNums: '',
          groupPrice: 0,
          commission: 0,
          score: 0,
          specificationsData: {},
          isDefault: false,
          status: true
        }
        this.$forceUpdate()
      }
    }
  },
  data: function () {
    let $this=this
    var checkCurrPrice1=function  (rule, value, callback) {
      if ((value+'').length===0 || (value+'')==='0'){
        if ($this.form.score<=0){
          return callback(new Error('非积分商品，金额 不能等于0'))
        }else{
          callback()
        }
      }else{
        callback()
      }
    }
    return {
      info: '创建库存',
      dialogVisible: false,
      currLoading: false,
      currProduct: {
        id: 0,
        name: '',
        productSpecificationsData: []
      },
      form: {
        shopProductId: 0,
        image: '',
        price: 1,
        nums: 100,
        model: '',
        groupPrice: 0,
        groupNums: 0,
        commission: 0,
        score: 0,
        specificationsData: {},
        isDefault: false,
        status: true,
      },
      rules: {
        model: [
          {required: true, message: '请输入 型号', trigger: ['blur', 'change']},
          {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: ['blur', 'change']}
        ],
        price: [
          {
            validator: checkCurrPrice1, trigger: ['blur', 'change']
          }
        ],
        commission: [
          {required: false, message: '请输入 佣金', trigger: ['blur', 'change']},
        ],
        nums: [
          {required: true, message: '请输入 库存', trigger: ['blur', 'change']},
        ],
        score: [
          {required: true, message: '请输入 兑换所需积分', trigger: ['blur', 'change']},
        ],
        groupPrice: [
          {required: false, message: '请输入 团购价格', trigger: ['blur', 'change']},
        ],
        weight: [
          {min: 1, max: 30, message: '重量 长度在 1 到 30 个字符', trigger: ['blur', 'change']}
        ],
        volume: [
          {min: 1, max: 30, message: '体积 长度在 1 到 30 个字符', trigger: ['blur', 'change']}
        ]
      }
    }
  },
  mounted() {
  },
  methods: {
    checkNums:function () {
      this.form.nums=this.toInt(this.form.nums)
      this.form.score=this.toInt(this.form.score)
      if (this.form.score>0){
        this.form.price=0
      }
      this.form.groupNums=this.toInt(this.form.groupNums)
    },
    setProduct: function (currProduct) {
      this.currProduct.id = currProduct.id
      this.currProduct.name = currProduct.name
      this.currProduct.modelArr = currProduct.modelArr
    },
    uploadIconSuccess: function (res) {
      this.form.image = res.data
    },
    open: function (infoData) {
      this.info = '创建-商品型号'
      if (infoData.id) {
        this.currProduct.id = infoData.shopProductId
        this.currProduct.name = infoData.shopProductName
        this.currProduct.productSpecificationsData = []
        let $this = this
        $this.MyRequest(this.ApiDoNameShop + "Product/getProductSpecificationsData", {id: infoData.shopProductId}, function (productSpecificationsData) {
          $this.info = '更新-商品型号'
          $this.currProduct.productSpecificationsData = productSpecificationsData
          $this.form.id = infoData.id
          $this.form.price = infoData.price
          $this.form.image = infoData.image
          $this.form.nums = infoData.nums
          $this.form.model = infoData.model
          $this.form.groupNums = infoData.groupNums
          $this.form.groupPrice = infoData.groupPrice
          $this.form.commission = infoData.commission
          $this.form.score = infoData.score
          $this.form.specificationsData = infoData.specificationsData
          $this.form.isDefault = infoData.isDefault.id === 1
          $this.form.status = infoData.status.id === 1
          if ($this.$refs.form) {
            $this.$refs.form.resetFields()
          }
          $this.dialogVisible = true
          $this.$forceUpdate()
        })

      } else {
        this.form = {
          price: 0,
          nums: 0,
          image: '',
          model: '',
          groupNums: '',
          groupPrice: 0,
          commission: 0,
          score: 0,
          pecificationsData: {},
          isDefault: false,
          status: true,
        }
        if (this.$refs.form) {
          this.$refs.form.resetFields()
        }
        this.dialogVisible = true
        this.$forceUpdate()
      }

    },
    submit: function () {
      let $this = this
      if ($this.form.isDefault && $this.form.score>0){
        return this.$message.error('【默认型号】不能【积分商品】')
      }
      $this.$refs.form.validate((valid) => {
        if (valid) {
          var api = 'Product/insertModel'
          var form = Object.assign({}, $this.form)
          if (form.id > 0) {
            api = 'Product/updateModel'
          }
          if ($this.form.groupNums == 1) {
            return $this.$message.error('团购数量必须大于1')
          }
          if (!form.specificationsData) {
            form.specificationsData = {}
          }
          if (form.commission >= 50) {
            return $this.$message.error('【佣金值】取值范围(0~50)%之间')
          }
          if (!form.commission){
            form.commission=0
          }
          form.specificationsData = JSON.stringify(form.specificationsData)
          form.shopProductId = $this.currProduct.id
          form.status = form.status ? 1 : 0
          form.isDefault = form.isDefault ? 1 : 0
          $this.currLoading = true
          $this.MyRequest(this.ApiDoNameShop + api, form, function () {
            $this.$message.success('操作成功')
            $this.currLoading = false
            $this.dialogVisible = false
            if (typeof $this.$props.successFunction === 'function') {
              $this.$props.successFunction()
            }
            $this.$forceUpdate()
          }, function (response) {
            $this.$message.warning(response.message)
            $this.currLoading = false
            $this.$forceUpdate()
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
